import React, { useEffect, useState } from 'react'
import { Button, SearchBar, Space, Toast, Tabs,IndexBar,List } from 'antd-mobile'
import { CollectMoneyOutline } from 'antd-mobile-icons'
import http from './api/api'
function App() {
  let { list, setList } = useState()
  const getData = async () => {
    let res = await http('/api/city')
    console.log('城市',res);
    // let {code,data} = res.data

    // if(code==200){

    // }
  }
  useEffect(() => {
    getData()
  })
  return (
    <div>
      <SearchBar placeholder='请输入内容' />
      <Tabs>
        <Tabs.Tab title='全部景点' key='fruits'>

        </Tabs.Tab>
        <Tabs.Tab title='位置距离' key='vegetables'>

        </Tabs.Tab>
        <Tabs.Tab title='综合排序' key='animals'>

        </Tabs.Tab>
        <Tabs.Tab title='筛选' key='animals'>

        </Tabs.Tab>
      </Tabs>
      <h2><span style={{ color: 'blue' }}><CollectMoneyOutline />北京</span>相关景点</h2>
      <div style={{ height: window.innerHeight }}>
      <IndexBar>
        {/* {list.map(group => {
          const { title, items } = group
          return (
            <IndexBar.Panel
              index={title}
              title={`标题${title}`}
              key={`标题${title}`}
            >
              <List>
                {items.map((item, index) => (
                  <List.Item key={index}>{item}</List.Item>
                ))}
              </List>
            </IndexBar.Panel>
          )
        })} */}
      </IndexBar>
    </div>
    </div>
  )
}

export default App
